<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"><!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Bootstrap中文网</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
    <meta name="author" content="Bootstrap中文网">
    <meta name="keywords" content="Bootstrap,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
    <meta name="robots" content="index,follow">
    <meta name="application-name" content="bootcss.com">

    <!-- Le styles -->
    <link href="docfiles/bootstrap.css" rel="stylesheet">
    <link href="docfiles/bootstrap-responsive.css" rel="stylesheet">
    <link href="docfiles/docs.css" rel="stylesheet">
    <style>
    h1, h2, h3, .masthead p, .subhead p, .marketing h2, .lead
{
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
  font-weight: normal;
}

#scrollUp {
  bottom: 20px;
  right: 20px;
  height: 38px;  /* Height of image */
  width: 38px; /* Width of image */
  background: url("assets/img/top.png") no-repeat;
}
    </style>
    <link href="docfiles/prettify.css" rel="stylesheet">
    <link href="docfiles/bootstro.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.bootcss.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.bootcss.com/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.bootcss.com/assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.bootcss.com/assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="http://www.bootcss.com/assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="http://www.bootcss.com/assets/ico/favicon.png">

    <script>
var _hmt = _hmt || [];
</script>
  <style type="text/css" id="holderjs-style">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style></head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://www.bootcss.com/">Bootstrap中文网</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="index.html">首页</a>
              </li>
              <li class="">
                <a href="getting-started.html" class="bootstro" data-bootstro-title="这里介绍了从零开始使用Bootstrap的基本步骤。教你创建一个最简单的Bootstrap页面。" data-bootstro-placement="bottom" data-bootstro-step="0">起步</a>
              </li>
              <li class="">
                <a href="scaffolding.html" class="bootstro" data-bootstro-title="这里详细介绍了Bootstrap的栅格系统。对于栅格系统的理论知识，最好动手谷歌一下！" data-bootstro-placement="bottom" data-bootstro-step="1">脚手架</a>
              </li>
              <li class="">
                <a href="base-css.html" class="bootstro" data-bootstro-title="这里介绍了Bootstrap对HTML标签所设置的默认样式。任何一个符合HTML5规范的页面只要引入Bootstrap就自然具有了优雅的外观，这就是Bootstrap的功劳！" data-bootstro-placement="bottom" data-bootstro-step="2">基本CSS样式</a>
              </li>
              <li class="">
                <a href="components.html" class="bootstro" data-bootstro-title="这里介绍了常用的诸如按钮、弹框、导航条、下拉菜单、进度条等等常见的页面组件。按照例子照猫画虎就可以，熟能生巧。这些都不需要刻意去记忆，需要的时候随时回来翻文档，然后复制、粘贴即可！" data-bootstro-placement="bottom" data-bootstro-step="3">组件</a>
              </li>
              <li class="">
                <a href="javascript.html" class="bootstro" data-bootstro-title="这里介绍了Bootstrap自带的具有交互功能的组件。页面要想与用户交互当然离不开Javascript了。Bootstrap的组件都是基于jQuery的，你熟悉jQuery吗？建议谷歌一下。" data-bootstro-placement="bottom" data-bootstro-step="4">JavaScript插件</a>
              </li>
              <li class="">
                <a href="customize.html" class="bootstro" data-bootstro-title="在这里可以通过设置Bootstrap提供的参数改变Bootstrap的样貌。我们不建议过早接触这里，在你熟悉Bootstrap阶段，最好是通过覆盖样式的方式修改Bootstrap默认的外观。等你需要深入了解Bootstrap时，可以先学习Lesscss ---&gt;&gt;&gt;" data-bootstro-placement="bottom" data-bootstro-step="5">定制</a>
              </li>
              <li class="lesscss">
                <a target="_blank" href="lesscss.html" class="bootstro" data-bootstro-title="Lesscss是一种预编译脚本，编译之后就是你所熟悉的CSS了。Bootstrap就是采用Less语法书写的。想要深入Bootstrap底层的同学一定要看这里打好基础！" data-bootstro-placement="bottom" data-bootstro-step="6">Lesscss教程</a>
              </li>

              <li class="">
                <a href="about.html">关于</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<div class="jumbotron masthead">
  <div class="container">
	<h1>Bootstrap</h1>
	<p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
	<p>
	  <a href="http://www.bootcss.com/assets/bootstrap.zip" class="btn btn-primary btn-large">下载Bootstrap</a>
	  <a href="#" class="btn btn-success btn-large hidden-phone hidden-tablet" id="start-intro">Bootstrap入门指南</a>
	</p>
	<ul class="masthead-links">
	<li>
		<a href="http://docs.bootcss.com/" target="_blank">Bootstrap文档</a>
	  </li>
	  <li>
		<a href="http://github.com/twitter/bootstrap" target="_blank">GitHub project</a>
	  </li>
	  <li>
		<a href="http://www.bootcss.com/getting-started.html#examples">案例</a>
	  </li>
	  <li>
		<a href="http://www.bootcss.com/extend.html">扩展</a>
	  </li>
	  <li>
				<a href="http://www.bootcss.com/p/bsie/">IE6兼容方案</a>
	  </li>
	  <li id="version">
		Version 2.3.2
	  </li>
	</ul>
  </div>
</div>

<div class="bs-docs-social">
  <div class="container">
	<ul class="bs-docs-social-buttons">
	  <li>
		<span class="label label-success">Bootstrap开发QQ群:</span><del style="display:none;">232693934(已
满)、204114414(已满)、38012881(已满)、133744974(已满)、299037589(已满)、112560384(已满)、
136374923（已满）、277196980（已满）、284095795（已满）、206172475（已满）、150643228（已满）、
272512220（已满）、</del>248557313
	  </li>
	  <li>
		<a href="http://weibo.com/bootcss" title="Bootstrap中文网官方微博" target="_blank"><img src="docfiles/Sina_Weibo_Logo_RGB_C_E.png" style="height: 30px;"></a>
	  </li>
	</ul>
  </div>
</div>

<div class="container">

  <div class="marketing">

  <h1>Bootstrap相关开源项目推荐</h1>
	<p class="marketing-byline">这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap的</p>


<div class="row-fluid">
	<div class="span4">
		<a href="http://gruntjs.bootcss.com/" title="Grunt是基于Node.js的项目构建工具。" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/gruntjs.png" height="150" width="300"></a>
		<h2> 
			<a href="http://gruntjs.bootcss.com/" title="Grunt是基于Node.js的项目构建工具。" target="_blank">Grunt<br><small>项目构建工具</small></a>
		</h2>
		<p>
			Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件，几乎任何你所要做的事情都可以用Grunt实现。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/buttons/" title="基于 Sass 和 Compass 构建的CSS按钮（button）样式库" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/buttons.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/buttons/" title="基于 Sass 和 Compass 构建的CSS按钮（button）样式库" target="_blank">Buttons<br><small>CSS按钮样式库</small></a>
		</h2>
		<p>
			Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮（button）样式库，图标采用的是<a href="http://www.bootcss.com/p/font-awesome/" target="_blank">Font Awesome</a>，可以和Bootstrap融合使用。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/layoutit/" title="Bootstrap可视化布局系统" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/layoutit.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/layoutit/" title="Bootstrap可视化布局系统" target="_blank">LayoutIt!<br><small>Bootstrap可视化布局</small></a>
		</h2>
		<p>
			LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由<a href="https://github.com/dodgepudding" target="_blank">4wer</a>同学汉化整理。
		</p>
	</div>
	
</div>


<div class="row-fluid">
	<div class="span4">
		<a href="http://www.bootcss.com/p/unslider/" title="Unslider" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/unslider.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/unslider/" title="Unslider" target="_blank">Unslider<br><small>jQuery轮播插件</small></a>
		</h2>
		<p>
			Unslider — 一个超小的 jQuery 轮播（slider） 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。
		</p>
	</div>
	<div class="span4">
		<a href="http://www.bootcss.com/p/bootstrap-switch/" title="Bootstrap Switch" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bootstrap-switch.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/bootstrap-switch/" title="Bootstrap Switch" target="_blank">Bootstrap Switch<br><small>Bootstrap开关组件</small></a>
		</h2>
		<p>
			Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。
		</p>
	</div>


	<div class="span4">
		<a href="http://www.bootcss.com/p/sco.js/" title="Sco.js" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/sco.js.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/sco.js/" title="Sco.js" target="_blank">Sco.js<br><small>Bootstrap组件增强版</small></a>
		</h2>
		<p>
			 由于大部分的Bootstrap js插件是无法扩展的，因此才有了sco.js，它是对Bootsrap中js插件的增强实现。
		</p>
	</div>
	
</div>

<div class="row-fluid">
	<div class="span4">
		<a href="http://www.bootcss.com/p/icheck/" title="iCheck" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/icheck.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/icheck/" title="iCheck" target="_blank">iCheck<br><small>增强复选框和单选按钮</small></a>
		</h2>
		<p>
			iCheck让不同浏览器下的复选框（checkboxes）和单选按钮（radio button）更美观、功能更强。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/bootstrap-wysiwyg/" title="bootstrap-wysiwyg" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bootstrap-wysiwyg.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/bootstrap-wysiwyg/" title="bootstrap-wysiwyg" target="_blank">bootstrap-wysiwyg<br><small>为Bootstrap定制的可视编辑器</small></a>
		</h2>
		<p>
			bootstrap-wysiwyg是一个jQuery Bootstrap插件（5KB, &lt; 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。
		</p>
	</div>


	<div class="span4">
		<a href="http://www.bootcss.com/p/chart.js/" title="Chart.js" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/chart.js.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/chart.js/" title="Chart.js" target="_blank">Chart.js<br><small>精巧的JS图表绘制工具库</small></a>
		</h2>
		<p>
			Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
		</p>
	</div>
	
</div>

<div class="row-fluid">
	<div class="span4 bootstro" data-bootstro-title="你学会Lesscss了吗？Preboot是Bootstrap的前身，也是精简版的Bootstrap，一旦你学会了Lesscss，建议你看Preboot的源码做进一步的学习。一旦你掌握了Preboot，那就进军Bootstrap的源码世界吧！" data-bootstro-placement="right" data-bootstro-step="7">
		<a href="http://www.bootcss.com/p/preboot/" title="Preboot" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/preboot.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/preboot/" title="Preboot" target="_blank">Preboot<br><small>Bootstrap之前世</small></a>
		</h2>
		<p>
			Preboot是一组用LESS语法书写的混合（mixin）和变量（variable）的集合，目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/jquery.pin/" title="jQuery.Pin" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/jquery.pin.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/jquery.pin/" title="jQuery.Pin" target="_blank">jQuery.Pin<br><small>固定页面元素的jQuery插件</small></a>
		</h2>
		<p>
			jQuery.Pin 能将任意页面元素“钉”在某个容器顶部，而且在尺寸小的屏幕上能够自动禁用这种效果。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/responsive-nav.js/" title="响应式导航" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/responsive-nav.js.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/responsive-nav.js/" title="响应式导航" target="_blank">Responsive Nav<br><small>响应式导航</small></a>
		</h2>
		<p>
			响应式导航（Responsive Nav）是一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航
		</p>
	</div>
	
</div>

<div class="row-fluid">
	<div class="span4">
		<a href="http://www.bootcss.com/p/bsie/" title="Bootstrap IE6兼容方案" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bsie.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/bsie/" title="Bootstrap IE6兼容方案" target="_blank">Bsie<br><small>Bootstrap IE6兼容方案</small></a>
		</h2>
		<p>
			Bsie弥补了Bootstrap对IE6的不兼容。目前，bsie能在IE6上支持大部分bootstrap的特性，可惜，还有一些实在无法支持...
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/messenger/" title="非常酷的弹框(Alert)组件" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/messenger.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/messenger/" title="非常酷的弹框(Alert)组件" target="_blank">Messenger<br><small>非常酷的弹框(Alert)组件</small></a>
		</h2>
		<p>
			Messenger是一个非常酷的弹框(Alert)组件，能够非常好的与Bootstrap融合，当然，单独使用效果也是非常棒。Messenger自带4套皮肤。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" title="Bootstrap日期时间选择器" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bootstrap-datetimepicker.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" title="Bootstrap日期时间选择器" target="_blank"> DateTime Picker<br><small>日期时间选择器</small></a>
		</h2>
		<p>
			Bootstrap日期时间选择器（Bootstrap DateTime Picker）是一个Bootstrap组件，能够简化页面上日期、时间的输入。
		</p>
	</div>
	
</div>

<div class="row-fluid">
	<div class="span4">
		<a href="http://www.bootcss.com/p/jquery-ui-bootstrap/" title="基于Bootstrap样式的 jQuery UI 控件" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/jquery-ui-bootstrap.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/jquery-ui-bootstrap/" title="基于Bootstrap样式的 jQuery UI 控件" target="_blank">jQuery UI Bootstrap <br><small>用Bootstrap美化jQuery UI</small></a>
		</h2>
		<p>这套工具让你在使用jQuery UI 控件时也能充分利用Bootstrap的样式，而且不会出现样式不统一的现象，Bootstrap和jQuery UI可以完美融合在一起了！</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/google-bootstrap/" title="Google风格的Bootstrap" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/google-bootstrap.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/google-bootstrap/" title="Google风格的Bootstrap" target="_blank">Google Bootstrap <br><small>Google风格的Bootstrap</small></a>
		</h2>
		<p>Google的UI素来以简洁著称，现在Bootstrap也来Google Style一把，喜欢Google的就来试试这套Google Bootstrap吧！</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/flat-ui/" title="Flat UI" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/flat-ui.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/flat-ui/" title="Flat UI" target="_blank">Flat UI<br><small>Metro风格的Bootstrap</small></a>
		</h2>
		<p>
			Flat UI是基于Bootstrap做的Metro化改造，由<a href="http://designmodo.com/">Designmodo</a>提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。再此强烈推荐！
		</p>
	</div>
	
</div>


  <div class="row-fluid">
	<div class="span4">
		<a href="http://www.bootcss.com/p/metro-ui-css/" title="Bootstrap Metro UI CSS"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/metro-ui-css.png" target="_blank" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/metro-ui-css/" title="Bootstrap Metro UI CSS" target="_blank">Metro UI CSS <br><small>Bootstrap与Metro融合</small></a>
		</h2>
		<p>
			Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式。现在，Metro UI CSS项目在Bootstrap的基础上被开发成一个独立的解决方案。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/font-awesome/" title="Font Awesome" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/font-awesome.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/font-awesome/" title="Font Awesome" target="_blank">Font Awesome <br><small>Bootstrap专用图标字体</small></a>
		</h2>
		<p>
			Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。
		</p>
	</div>


	<div class="span4">
		<a href="http://www.bootcss.com/p/simple-icons/" title="Icon汇" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/simpleicons.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/simple-icons/" title="Icon汇" target="_blank"> Simple Icons<br><small>Icon汇</small></a>
		</h2>
		<p>
			Simple Icons -- Icon汇。收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友，所有Icon版权归其所属公司。
		</p>
	</div>
	
</div>

<div class="row-fluid">
	
	<div class="span4">
		<a href="http://www.bootcss.com/p/bootstrap-form-builder/" title="Bootstrap 在线表单构造器" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bootstrap-form-builder.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/bootstrap-form-builder/" title="Bootstrap 在线表单构造器" target="_blank">Bootstrap  Form Builder<br><small>在线表单构造器</small></a>
		</h2>
		<p>
			Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于Bootstrap的完整表单，减轻了各位码农手写HTML代码的劳动，而且不会出错。
		</p>
	</div>

	<div class="span4">
		<a href="http://www.bootcss.com/p/html5boilerplate/" title="HTML5 Boilerplate" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/h5bp.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/html5boilerplate/" title="HTML5 Boilerplate" target="_blank">HTML5 Boilerplate<br><small>专业的前端模版</small></a>
		</h2>
		<p>
			HTML5 Boilerplate 是一套专业的前端模版，用以开发快速、健壮、适应性强的app或网站。
		</p>
	</div>

	<div class="span4">
		<a onclick="_hmt.push(['_trackEvent', 'tuijian', 'click', 'w3cplus'])" href="http://www.w3cplus.com/" title="Web开发原创文章" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/w3cplus.com.png" height="150" width="300"></a>
		<h2> 
			<a onclick="_hmt.push(['_trackEvent', 'tuijian', 'click', 'w3cplus'])" href="http://www.w3cplus.com/" title="Web开发原创文章" target="_blank">W3Cplus<br><small>推荐网站</small></a>
		</h2>
		<p>
			W3CPLUS努力打造最优秀的web 前端学习的站点。Bootstrap中文网推荐广大攻城师多看看上面有价值的资料。
		</p>
	</div>
 
</div>
<div class="row-fluid">
	<div class="span4">
		<a href="http://www.bootcss.com/p/websafecolors/" title="Web安全色" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/websafecolors.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/websafecolors/" title="Web安全色" target="_blank">Web Safe Colors<br><small>Web安全色</small></a>
		</h2>
		<p>
			本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。
		</p>
	</div>


	<div class="span4">
		<a href="http://v3.bootcss.com/" title="Bootstrap CSS v3.0版预览" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bootstrap-v3.png" height="150" width="300"></a>
		<h2> 
			<a href="http://v3.bootcss.com/" title="Bootstrap CSS v3.0版预览" target="_blank">Bootstrap v3.0版预览<br><small>IE8以下勿入！</small></a>
		</h2>
		<p>
			这是 Bootstrap CSS v3.0 预览版，正式版发布时间待定。Bootstrap中文网整理之后放上来让广大Bootstrap粉丝先睹为快。记住哦，IE8以下的浏览器退避吧！
		</p>
	</div>

	<div class="span4">
		<a onclick="_hmt.push(['_trackEvent', 'tuijian', 'click', 'uisdc'])" href="http://www.uisdc.com/" title="优秀网页设计联盟" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/uisdc.com.png" height="150" width="300"></a>
		<h2> 
			<a onclick="_hmt.push(['_trackEvent', 'tuijian', 'click', 'uisdc'])" href="http://www.uisdc.com/" title="优秀网页设计联盟(SDC)" target="_blank">优秀网页设计联盟<br><small>推荐网站</small></a>
		</h2>
		<p>
			优秀网页设计联盟(SDC)，是有着良好职业交流氛围的网页设计行业联盟。联盟始终坚持开放、分享、成长的宗旨，为会员提供交流互动平台和网页设计讲座。
		</p>
	</div>
</div>


<div class="row-fluid">
	<div class="span4">
		<a href="http://bootstraped.org/" title="BootstrapEd = 增强Bootstrap" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bootstraped.png" height="150" width="300"></a>
		<h2> 
			<a href="http://bootstraped.org/" title="BootstrapEd = 增强Bootstrap" target="_blank">BootstrapEd<br><small>增强Bootstrap</small></a>
		</h2>
		<p>
			BootstrapEd是基于Bootstrap，并且，优化Bootstrap在中文WEB环境中的效果；增强Bootstrap中的内置组件；增加有价值的通用组件！
		</p>
	</div>
	<div class="span4">
		<a href="http://docs.bootcss.com/" title="Bootstrap文档全集" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bootstrap-docs.png" height="150" width="300"></a>
		<h2> 
			<a href="http://docs.bootcss.com/" title="Bootstrap文档全集" target="_blank">Bootstrap Docs<br><small>Bootstrap文档全集</small></a>
		</h2>
		<p>
			这里收集了Bootstrap从V1.0.0版本到现在，整个文档的历史。Bootstrap本身就是一个传奇，而这些文档就是传奇的见证！
		</p>
	</div>


	<div class="span4">
		<a href="http://www.bootcss.com/p/git-guide/" title="Git简易指南" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/git-guide.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/git-guide/" title="git简易指南" target="_blank">Git Guide<br><small>Git简易指南</small></a>
		</h2>
		<p>
			Git简易指南 -- 帮助你开始使用 git 的简易指南，木有高深内容，;)。
		</p>
	</div>

</div>

<div class="row-fluid">

	<div class="span4">
		<a href="http://www.bootcss.com/p/grumblejs/" title="气泡形状的提示（Tooltip）控件" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/grumblejs.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/grumblejs/" title="气泡形状的提示（Tooltip）控件" target="_blank">Grumble.js<br><small>气泡形状的提示（Tooltip）控件</small></a>
		</h2>
		<p>
			一个气泡形状的提示（Tooltip）控件，可以在其围绕的元素周围做360度任意定位。
		</p>
	</div>

	
	<div class="span4">
		<a href="http://www.bootcss.com/p/cikonss/" title="纯CSS实现的Icon" target="_blank"><img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/cikonss.png" height="150" width="300"></a>
		<h2> 
			<a href="http://www.bootcss.com/p/cikonss/" title="纯CSS实现的Icon" target="_blank">CIKONSS<br><small>纯CSS实现的Icon</small></a>
		</h2>
		<p>
			Cikonss是纯CSS实现的响应式Icon，兼容IE8+。
		</p>
	</div>
	
</div>



	<h1>Bootstrap介绍。</h1>
	<p class="marketing-byline">需要为爱上Bootstrap找N多理由吗？ 就在眼前。</p>

	<div class="row-fluid">
	  <div class="span4">
		<img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bs-docs-twitter-github.png" height="290" width="600">
		<h2>人人为我，我为人人。</h2>
		<p>由<a href="http://twitter.com/mdo">@mdo</a> 和 <a href="http://twitter.com/fat">@fat</a> 在Twitter工作时创建，Bootstrap使用 <a href="http://www.bootcss.com/lesscss.html">LESS CSS</a> 并用 <a href="http://nodejs.org/">Node</a> 编译，托管在 <a href="http://github.com/">GitHub</a> 上，方便大家使用这一框架构建更好的web应用。</p>
	  </div>
	  <div class="span4">
		<img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bs-docs-responsive-illustrations.png" height="290" width="554">
		<h2>任何人都可以使用。</h2>
		<p>Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。在平板电脑和智能手机上面还有 <a href="http://www.bootcss.com/scaffolding.html#responsive">响应式CSS</a> 可以使用。</p>
	  </div>
	  <div class="span4">
		<img class="marketing-img lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/bs-docs-bootstrap-features.png" height="290" width="600">
		<h2>丰富的特色。</h2>
		<p>12列的响应式<a href="http://www.bootcss.com/scaffolding.html#grid">栅格结构</a>、丰富的组件、<a href="http://www.bootcss.com/javascript.html">JavaScript插件</a>、排版、表单控件，还有 <a href="http://www.bootcss.com/customize.html">基于web的定制工具</a>。</p>
	  </div>
	</div>

	<hr class="soften">

	<h1>基于Bootstrap构建的网站。</h1>
	<p class="marketing-byline">更多基于Bootstrap构建的网站列表，请 <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">访问非官方的Tumblr网站</a> 或者 <a href="http://www.bootcss.com/getting-started.html#examples">看看下面的几个案例</a>。</p>
	<div class="row-fluid">
	  <ul class="thumbnails example-sites">
		<li class="span6">
		  <a class="thumbnail" href="http://kippt.com/" target="_blank">
			<img class="lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/example-sites/kippt.com.png" alt="Kippt" height="290" width="560">
		  </a>
		</li>
		<li class="span6">
		  <a class="thumbnail" href="http://www.golaravel.com/" target="_blank" title="Laravel中文网">
			<img class="lazy" src="docfiles/bs-docs-masthead-pattern.png" data-src="assets/img/example-sites/golaravel.com.png" alt="Laravel中文网" height="290" width="560">
		  </a>
		</li>
	  </ul>
	  <div>
		<a class="btn btn-large btn-block btn-primary" href="http://expo.bootcss.com/" target="_blank">Bootstrap优秀网站Show</a>
	  </div>
	 </div>

  </div>

</div>




    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com/" target="_blank">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
        <p>本网站所列开源项目的中文版文档全部由<a href="http://www.bootcss.com/">Bootstrap中文网</a>成员翻译，并全部遵循 <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>协议发布。</p>
        <ul class="footer-links">
          <li><a href="http://www.bootcss.com/about.html" target="_blank">关于</a></li>
          <li class="muted">·</li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open" target="_blank">问题反馈</a></li>
          <li class="muted">·</li>
          <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">版本变更记录</a></li>
          <li><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></li>
        </ul>
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="docfiles/jquery_002.js"></script>
    <script src="docfiles/jquery.js"></script>
    <script src="docfiles/bootstrap.js"></script>
    <script src="docfiles/bootstro.js"></script>
    <script src="docfiles/prettify.js"></script>

  <script src="docfiles/jquery_003.js"></script>
    <script>
      $(document).ready(function(){
        $("img.lazy").unveil();
        
             $("#start-intro").click(function(){
                bootstro.start();    
            });

             $.scrollUp({
                  scrollName: 'scrollUp', // Element ID
                  topDistance: '300', // Distance from top before showing element (px)
                  topSpeed: 300, // Speed back to top (ms)
                  animation: 'fade', // Fade, slide, none
                  animationInSpeed: 200, // Animation in speed (ms)
                  animationOutSpeed: 200, // Animation out speed (ms)
                  scrollText: '', // Text for element
                  activeOverlay: false  // Set CSS color to display scrollUp active point, e.g '#00FFFF'
            });
          });
    </script>

    <!-- Analytics
    ================================================== -->
    <script src="docfiles/h.js" type="text/javascript"></script>
    
    <script src="docfiles/holder.js"></script>
    <script src="docfiles/application.js"></script>
  

<a style="display: none; position: fixed; z-index: 2147483647;" title="" href="#top" id="scrollUp"></a></body></html>